<template>
  <el-container :style="{ height: screenHeight }">
    <el-header>
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="el-icon-lollipop"></i>智慧园区管理平台
          </div>
        </el-col>
        <el-col :span="13">
          <div class="grid-content bg-purple">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="综合态势" name="first"> </el-tab-pane>
              <el-tab-pane label="运营管理" name="second"> </el-tab-pane>
              <el-tab-pane label="物业管理" name="third"> </el-tab-pane>
              <el-tab-pane label="数据可视" name="fourth"> </el-tab-pane>
              <el-tab-pane label="配置中心" name="five"> </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="whether">
            <div id="he-plugin-simple"></div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="50" :src="circleUrl"></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                <el-dropdown-item command="b">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <!-- 运营管理导航 -->
              <oper v-show="yunying" :key="kk"></oper>
              <!-- 物业管理导航 -->
              <prop v-show="wuye" :key="kk"></prop>
              <!-- 数据可视导航 -->
              <dat v-show="shuju" :key="kk"></dat>
              <!-- 配置中心导航 -->
              <conf v-show="peizhi" :key="kk"></conf>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content bg-purple-light">
              <!-- 这里展示大家的数据表 上面的可以理解为表头等 -->
              <router-view></router-view>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Conf from "./Conf.vue";
import Dat from "./Dat.vue";
import Oper from "./Oper.vue";
import Prop from "./Prop.vue";
import Equipment from "./Equipment.vue";

export default {
  components: { Oper, Prop, Dat, Conf, Equipment },

  data() {
    return {
      screenHeight: document.documentElement.clientHeight + "px",
      activeName: "first",
      circleUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      yunying: false,
      wuye: false,
      shuju: false,
      peizhi: false,
    };
  },
  mounted() {
    this.$router.push("/Zong");
    window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: "5",
        tmpColor: "black",
        tmpSize: "16",
        cityColor: "black",
        citySize: "16",
        aqiColor: "black",
        aqiSize: "16",
        weatherIconSize: "24",
        alertIconSize: "18",
        padding: "10px 10px 10px 10px",
        shadow: "0",
        language: "auto",
        fixed: "false",
        vertical: "top",
        horizontal: "left",
        city: "CN101110101",
        float: "false",
        key: "f70898de9e0b48eda4380c31d69dfd1d",
      },
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  methods: {
    logout() {
      //请求路径默认为/logout
      this.$axios.delete("/logout").then((res) => {
        if (res.data.code == 200) {
          //清空localStorage对应的信息
          sessionStorage.setItem("authorization", "");
          this.$message.success(res.data.message);
          //跳转到登录页面
          this.$router.push("/");
        }
      });
    },

    // 头像的点击事件
    handleCommand(command) {
      if (command === "a") {
        alert("你还对自己不了解吗？还要啥个人中心");
      } else {
        this.logout();
      }
    },
    // 主页面的点击切换事件
    handleClick(tab, event) {
      if (this.activeName === "second") {
        (this.kk = new Date()), this.$router.push("/Yun");
        this.yunying = true;
        this.wuye = false;
        this.shuju = false;
        this.peizhi = false;
      } else if (this.activeName === "third") {
        (this.kk = new Date()), this.$router.push("/Wu");
        this.wuye = true;
        this.yunying = false;
        this.shuju = false;
        this.peizhi = false;
      } else if (this.activeName === "fourth") {
        (this.kk = new Date()), this.$router.push("/Shu");
        this.shuju = true;
        this.wuye = false;
        this.yunying = false;
        this.peizhi = false;
      } else if (this.activeName === "five") {
        (this.kk = new Date()), this.$router.push("/Pei");
        this.peizhi = true;
        this.shuju = false;
        this.wuye = false;
        this.yunying = false;
      } else {
        (this.kk = new Date()), this.$router.push("/Zong");
        this.yunying = false;
        this.wuye = false;
        this.shuju = false;
        this.peizhi = false;
      }
    },
  },
};
</script>
<style>
.whether {
  margin-top: 10px;
  float: left;
  position: relative;
  z-index: 9999;
}
.el-header,
.el-footer {
  background-color: #f2f6fc;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
